<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head >
    <title>搜索管理后台 - 商品分类属性管理</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="${request.contextPath}/css/style_manager.css">
	<style type="text/css">
	#table{
		margin : auto 30px;
	}
	#leftDiv,#rightDiv{
		width: 400px;
		height: 600px;
		background-color:#efefef;
		overflow:auto;
		font-size:13px;
		text-align:left;
	}
	li{
		list-style: none;
		line-height:18px;
	}
	.cateName {
		cursor:pointer;
		text-decoration:underline;
		color:blue;
	}
	.couldClick{
		text-decoration:underline;
		cursor:pointer;
	}
	.showAttrsSpan{
		color:#aaaaaa;
		text-decoration:none;
	}
	.showAttrsSpan:hover{
		color:#666666;
	}
	#rightDiv{
		padding-left:10px;
	}
	.titlep{
		font-weight:bold;
	}
	span[name="upSpan"]{
		color:green;
		font-weight:bold;
		margin-left:20px;
	}
	span[name="downSpan"]{
		font-weight:bold;
		color:blue;
		margin-left:10px;
	}
	span[name="deleteSpan"]{
		font-weight:bold;
		color:red;
		margin-left:10px;
	}
	span[name="addSpan"]{
		font-weight:bold;
		color: green;
		margin-left:20px;
	}
	</style>
	<script type="text/javascript" src="${request.contextPath}/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="${request.contextPath}/js/jquery.overblock-1.2.js"></script>
		
	<script type="text/javascript">
	//全局变量
	var cateDivID = 'cateDiv_';
	var $attrInfoSelect;
	$(function(){
		showSubCate(document.getElementById('allCate'));
		loadAttrInfoSelect();
		
		//统一绑定动作
		var $rightDiv = $('#rightDiv');
		$rightDiv.find('span[name=upSpan]')
				.live('click',function(){
					liftSort($rightDiv.attr('cid'),this,1);
				})
		$rightDiv.find('span[name=downSpan]')
				.live('click',function(){
					liftSort($rightDiv.attr('cid'),this,-1);
				})
		$rightDiv.find('span[name=deleteSpan]')
				.live('click',function(){
					deleteSort($rightDiv.attr('cid'),this);
				})
		$rightDiv.find('span[name=addSpan]')
				.live('click',function(){
					addSort($rightDiv.attr('cid'),this);
				})
		$rightDiv.find('span[name=upSpan],span[name=downSpan],span[name=deleteSpan],span[name=addSpan],span[name=showAttrs]')
				.live('mouseover',function(){
					$(this).addClass('couldClick');
				})
				.live('mouseleave',function(){
					$(this).removeClass('couldClick');
				});
				


				
	});
	function showSubCate(obj_this, cid) {
		var obj = $(obj_this).parent('li');
		cid = cid || 0;
		var subDivID = cateDivID + cid;
		var subDiv = $('#' + subDivID);
		if(subDiv.length > 0) {
			showHidden(subDiv);
		}else{
			jQuery.ajax({
				url : 'parentCates?pid=' + cid,
				type : 'get',
				success : function(rs) {
					var h = '';
					if(rs && rs.length > 5) {
						var list = eval(rs);
						
						h += '<div id="'+subDivID+'" style="display:none;">';
						h += '<ul>';
						for(var i = 0; i < list.length; i ++) {
							var cate = list[i];
							var cid = cate.catId;
							var name = cate.catName;
							var flag = cate.flag;
							h += '<li class="cateInfoLi">';
							if(flag) {
								h += '<span class="cateName" onclick="showSubCate(this, '+cid+')">'+name+'('+cid+')</span>&nbsp;&nbsp;&nbsp;';
								h += '<span name="showAttrs" class="showAttrsSpan" onclick="showAttrs('+cid+ ',\''+name+'\')">'+'查看属性'+'</span>';
							}else{
								h += '<span class="noSubName" >'+name+'('+cid+')</span>&nbsp;&nbsp;&nbsp;';
								h += '<span name="showAttrs" class="showAttrsSpan" onclick="showAttrs('+cid+ ',\''+name+'\')">'+'查看属性'+'</span>';
							}
							h += '</li>';
						}
						h += '</ul>';
						h += '</div>';
						obj.after(h);
						showHidden($('#' + subDivID));
					}
				}
			});
		}
	}
	//显示分类下属性
	function showAttrs(cid, name){
	
		url = 'cateAttrs';
		data = {'cid':cid};
		var $rightDiv = $('#rightDiv');
		$rightDiv.html('<div style="padding-top:5px;">您正在查看 <font style="color:red;">'+name+'</font> 的属性</div>');
		
		$rightDiv.attr('cid',cid);
		jQuery.get(url,data,function(rs){
			var l = eval(rs);
			//被显示的属性部分
			var $divShown = $('<div></div>').attr('name','divShown');
			$rightDiv.append($divShown);
			$('<p class="titlep">显示属性：</p>').appendTo($divShown);
			var $ul = $('<ul></ul>').appendTo($divShown);
			var list = l[0];
			for(var i=0; i < list.length; i++){
				var attr = list[i];
				var $li = buildShowLi(attr.attrCode,attr.attrName).appendTo($ul);
			}
			$('<br />').appendTo($rightDiv);
			//不被显示属性部分
			var $divNotShown = $('<div></div>').attr('name','divNotShown').appendTo($rightDiv);
			$('<p class="titlep">不显示属性:</p>').appendTo($divNotShown);
			$ul = $('<ul></ul>').appendTo($divNotShown);
			var notShownList = l[1];
			for(var i=0; i<notShownList.length;i++){
				var attr = notShownList[i];//一个不被显示的属性
				var $li = buildNotShowLi(attr.attrCode,attr.attrName).appendTo($ul);
			}
			//从数据库添加新属性区域
			var $divAddAttrInfo = $('<div></div>').attr('name','divAddAttrInfo').appendTo($rightDiv);
			$('<spap class="titlep">新增属性:</span>').appendTo($divAddAttrInfo);
			var $select = $attrInfoSelect.clone().appendTo($divAddAttrInfo);
			$('<input type="button" value="新增"/>').appendTo($divAddAttrInfo)
												.click(function(){
													var option = $select.find('option:selected');
													addAttrInfo(cid,option.attr('attrCode'),option.val());
												});
			$('<input type="text" onkeyup="getSimi(this);" />').appendTo($divAddAttrInfo);
		});
		
	}
	//上移下移属性
	//offset目前只支持1和-1
	function liftSort(cid,span,offset){
		var $span = $(span);
		var $li = $span.parent('li');
		var url = 'liftSort';
		var attrCode =  $span.attr('attrCode');
		var data={'cid':cid,'attrCode':attrCode,'offset':offset};
		jQuery.get(url,data,function(){
			//上移 待移动li要和前面li换位
			if(1 == offset){
				var $prevLi = $li.prev();
				if($prevLi.size() > 0){
					//交换prevLi和$li位置
					$li.insertBefore($prevLi);
				}
			}else if(-1 == offset){
				var $nextLi = $li.next();
				if($nextLi.size() > 0){
					$li.insertAfter($nextLi);
				}
			}
		});
	}
	//删除属性(使其不可显示)
	function deleteSort(cid,span){
		//alert($('div[name=divNotShown]').children('ul').size());
		var $span = $(span);
		var $oldLi = $span.parent('li');
		var attrName = $oldLi.children(':first').text();
		var attrCode = $span.attr('attrCode');
		url="deleteSort";
		data={'cid':cid,'attrCode':attrCode};
		jQuery.get(url,data,function(){
			var $ul = $('div[name=divNotShown]').children('ul');
			var $li = buildNotShowLi(attrCode,attrName).prependTo($ul);
			$oldLi.remove();
		});
	}
	//添加属性(使其可显示)
	function addSort(cid,span){
		var $span = $(span);
		var $oldLi = $span.parent('li');
		var attrName = $oldLi.children(':first').text();
		var attrCode = $span.attr('attrCode');
		url="addSort";
		data={'cid':cid,'attrCode':attrCode};
		jQuery.get(url,data,function(){
			var $ul = $('div[name=divShown]').children('ul');
			var $li = buildShowLi(attrCode,attrName).appendTo($ul);
			$oldLi.remove();
		});
	}
	//新增属性
	function addAttrInfo(cid,attrCode,attrName){
		var url = 'addAttrInfo';
		var data={'cid':cid,'attrCode':attrCode};
		jQuery.get(url,data,function(rs){
			if(rs == 'true'){
				var $li = buildNotShowLi(attrCode,attrName);
				$li.appendTo($('div[name=divNotShown]').children('ul'));
			}
		});
	}
	//创建一个代表被显示属性的li元素
	function buildShowLi(attrCode,attrName){
		var $li = $('<li></li>');
		var $attrSpan = $('<span></span>')
					.attr('attrCode',attrCode)
					.text(attrName)
					.appendTo($li);
		 var $upSpan = $('<span></span>').attr('name','upSpan').attr('attrCode',attrCode).text('↑').appendTo($li);
		 var $downSpan = $('<span></span>').attr('name','downSpan').attr('attrCode',attrCode).text('↓').appendTo($li);
		 var $deleteSpan = $('<span></span>').attr('name','deleteSpan').attr('attrCode',attrCode).text('×').appendTo($li);
		 return $li;
	}
	//创建一个代表不被显示属性的li元素
	function buildNotShowLi(attrCode,attrName){
		var $li = $('<li></li>');
		var $attrSpan = $('<span></span>')
						.attr('attrCode',attrCode)
						.text(attrName)
						.appendTo($li);
		var $addSpan = $('<span></span>').attr('name','addSpan').attr('attrCode',attrCode).text('＋').appendTo($li);
		return $li;
	}
	//加载新增属性下拉框数据
	function loadAttrInfoSelect(){
		jQuery.get('loadAttrInfoSelect',function(rs){
			$attrInfoSelect = $('<select id="selectedObj"><select>');
			var list = eval(rs);
			$('<option attrCode="">请选择</option>').appendTo($attrInfoSelect);
			for(var i = 0; i < list.length; i++){
				var optionKey = list[i].optionKey;
				var optionValue = list[i].optionValue;
				$('<option></option>').text(optionValue).attr('attrCode',optionKey).appendTo($attrInfoSelect);
			}
		});
	}
	function showHidden(obj) {
		if(obj.data('v') == null || obj.data('v') == 0) {
			obj.slideDown(300);
			obj.data('v', 1);
			
			if(isOnlyOne()) {
				var others = obj.siblings('div[id*="cateDiv_"]');
				others.slideUp(300, function() {
					hiddenSubs($(this));
				});
				others.data('v', 0);
			}
		}else{
			obj.slideUp(300, function(){
				hiddenSubs(obj);
			});
			obj.data('v', 0);
		}
	}
	
	function hiddenSubs(obj) {
		if($('#isSubIn').attr('checked')){
			var o = obj.find('div[id*="cateDiv_"]');
			o.css('display', 'none');
			o.data('v', 0);
		}
	}
	function isOnlyOne() {
		return $('#isOnlyOne').attr('checked');
	}
	
	function getSimi(oThis) {
		var obj = $(oThis);
		var v = obj.val().replace(/\s/gi, '');
		if(v && v.length > 0) {
			var slct = $('#selectedObj');
			slct.find('option').each(function(){
				if($(this).val().indexOf(v) > -1) {
					$(this).attr('selected', 'selected');
					return false;
				}
			});
			
		}
		
	}
	</script>
  </head>
  <body>
  	<div style="margin-top:30px;margin-left:22px;">
		<h3>商品分类属性管理</h2>
  	</div>
  	<table id="table">
  		<tr>
  			<td>
  				<div id="leftDiv">
					<ul>
						<li><span id="allCate" style="font-weight:bold;">全部分类</span>
							<span style="color:gray;margin-left:65px;">
								<input id="isOnlyOne" type="checkbox" checked="checked" /><label for="isOnlyOne">单个展开</label>
							</span>
							<span style="color:gray;margin-left:10px;">
								<input id="isSubIn" type="checkbox" /><label for="isSubIn">同时收起子分类</label>
							</span>
						</li>
					</ul>
  				</div>
  			</td>
  			<td>
  				<div id="rightDiv">
  				
  				</div>
  				<div id="addAttrInfo">
  				</div>
  			</td>
  		</tr>
  	</table>
  </body>
</html>
